<template>
  <view class="container">
    <!-- 消息列表 -->
    <view class="message-list">
      <view 
        class="message-item" 
        v-for="item in messages" 
        :key="item.id"
        :class="{ unread: !item.isRead }"
        @click="goToChat(item)"
      >
        <image class="avatar" :src="item.avatar" mode="aspectFill" />
        
        <view class="message-content">
          <view class="message-header">
            <text class="username">{{ item.username }}</text>
            <text class="time">{{ item.lastTime }}</text>
          </view>
          <text class="last-message">{{ item.lastMessage }}</text>
        </view>
        
        <view class="message-status">
          <view class="unread-count" v-if="item.unreadCount > 0">
            {{ item.unreadCount > 99 ? '99+' : item.unreadCount }}
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view v-if="messages.length === 0" class="empty-tip">
      <text>暂无消息</text>
    </view>
    
    <!-- 加载更多 -->
    <view v-if="hasMore" class="load-more" @click="loadMore">
      <text>加载更多</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 消息列表数据
const messages = ref([
  {
    id: 1,
    username: '张三',
    avatar: '/static/images/avatar/default.svg',
    lastMessage: '你好，我想借阅《三体》这本书',
    lastTime: '14:30',
    unreadCount: 2,
    isRead: false
  },
  {
    id: 2,
    username: '李四',
    avatar: '/static/images/avatar/default.svg',
    lastMessage: '好的，我已经收到你的借阅请求',
    lastTime: '昨天',
    unreadCount: 0,
    isRead: true
  },
  {
    id: 3,
    username: '王五',
    avatar: '/static/images/avatar/default.svg',
    lastMessage: '请问这本书什么时候可以归还？',
    lastTime: '周一',
    unreadCount: 0,
    isRead: true
  }
]);

// 是否还有更多数据
const hasMore = ref(true);

// 页码
const page = ref(1);

// 跳转到聊天页面
const goToChat = (message: any) => {
  // 标记为已读
  if (!message.isRead) {
    message.isRead = true;
    message.unreadCount = 0;
    // TODO: 调用标记已读API
    // markAsRead(message.id);
  }
  
  uni.navigateTo({
    url: `/pages/message/chat/index?id=${message.id}`
  });
};

// 加载消息数据
const loadMessages = async () => {
  try {
    // TODO: 调用API获取数据
    // const res = await getMessages({
    //   page: page.value
    // });
    // messages.value = page.value === 1 ? res.data : [...messages.value, ...res.data];
    // hasMore.value = res.data.length === 10;
  } catch (error) {
    uni.showToast({
      title: '加载失败',
      icon: 'none'
    });
  }
};

// 加载更多
const loadMore = () => {
  if (!hasMore.value) return;
  page.value++;
  loadMessages();
};

// 页面加载时获取数据
onMounted(() => {
  loadMessages();
});
</script>

<style lang="scss">
.container {
  padding: 20rpx;
}

.message-list {
  .message-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    background: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    
    &.unread {
      background: #f8f8f8;
      
      .message-content {
        .username {
          font-weight: bold;
        }
        
        .last-message {
          color: #333;
        }
      }
    }
    
    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    
    .message-content {
      flex: 1;
      margin-right: 20rpx;
      
      .message-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10rpx;
        
        .username {
          font-size: 28rpx;
          color: #333;
        }
        
        .time {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .last-message {
        font-size: 26rpx;
        color: #666;
        line-height: 1.6;
        @include text-ellipsis;
      }
    }
    
    .message-status {
      .unread-count {
        min-width: 40rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        background: #ff5252;
        color: #fff;
        font-size: 24rpx;
        border-radius: 20rpx;
        padding: 0 10rpx;
      }
    }
  }
}

.empty-tip {
  text-align: center;
  color: #999;
  font-size: 28rpx;
  margin-top: 200rpx;
}

.load-more {
  text-align: center;
  padding: 30rpx 0;
  color: #666;
  font-size: 28rpx;
}
</style> 
